<template>
    <div class="register">
        <div class="header">
            <button @click="$router.go(-1)">取消</button>
        </div>
        <div class="container">
            <div class="title">注册账户</div>
            <div class="content">
                <!-- 表单 -->
                <form>
                <InputGroup 
                    label="昵称"
                    placeholder="例如:张三"
                    v-model="user.name"
                    type="text"
                />

                <InputGroup 
                    label="邮箱"
                    placeholder="请填写邮箱"
                    v-model="user.email"
                    type="email"
                />
                <InputGroup 
                    label="密码"
                    placeholder="新密码"
                    v-model="user.password"
                    type="password"
                />
                <InputGroup 
                    label="确认密码"
                    placeholder="请确认密码"
                    v-model="user.password2"
                    type="password"
                />
            </form>
             <div class="btn_wrap">
                <YButton :disabled="isDisabled" @click="registerClick">注册</YButton>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
import InputGroup from './../components/InputGroup'
import YButton from './../components/YButton'
export default {
    name:'register',
    components:{InputGroup,YButton},
    data(){
        return{
             user:{
                name:'',
                email:'',
                password:'',
                password2:'',

            }
        }
    },
    computed:{
        isDisabled(){
            if(this.user.name&&this.user.email&&this.user.password&&this.user.password2)
                return false;
                else return true;
            
        }
    },
    methods:{
        registerClick(){
             //验证邮箱
            var reg =/^([a-zA-Z0-9._-])+@([a-zA-A0-9_-])+(\.[a-zA-Z0-9_-])+/;
            if(!reg.test(this.user.email)){
                alert('请输入合法的邮箱地址!');
                return;
            }
            // 判断密码是否一致
            if(this.user.password !== this.user.password2){
                alert('两次密码不一致!')
                return;
            }


            // 请求接口 后台的接口为5001 我们本地的接口为8080,所以我们需要去到vue.config.js配置跨域 http://localhost:5001/api/
            this.$axios.post('/api/users/register',this.user)
            .then(res =>{
                // 注册成功
                alert('注册成功!')
                this.$router.push('/login')
                console.log(res)
            })//在http全局配置了catch所以这边是不用配置的

        }
    }
}
</script>
<style scoped>
.register{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 50px;
}
.header button{
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
    color: #20af0e;
}
.container{
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.title{
    margin-top: 30px;
    font-size: 22px;
    text-align: center;
}
</style>


